import Link from "next/link"

export default function CertificatesPage() {
  return (
    <main className="min-h-screen">
   
      <section className="py-20 pt-8">
        {/* 设置并列布局grid grid-cols-2 gap-8 */}
        <div className="container mx-auto px-4 ">
          {/* <div className="max-w-3xl mx-auto"> */}
          <div className="max-w-3xl mx-auto">
            <div className="bg-white rounded-lg shadow-sm p-8">
              <h2 className="text-2xl font-bold mb-6">登录</h2>
              <form className="space-y-6">
                <div>
                  <label htmlFor="certificate-number" className="block text-sm font-medium mb-2">
                    姓名：
                  </label>
                  <input
                    type="text"
                    id="certificate-number"
                    className="w-full px-4 py-2 border rounded-md"
                    placeholder="请输入姓名"
                  />
                </div>
                <div>
                  <label htmlFor="name" className="block text-sm font-medium mb-2">
                    身份账号
                  </label>
                  <input
                    type="text"
                    id="name"
                    className="w-full px-4 py-2 border rounded-md"
                    placeholder="请输入身份账号"
                  />
                </div>
                <button type="submit" className="w-full bg-primary text-white py-2 rounded-md hover:bg-primary/90">
                  查询
                </button>
              </form>
            </div>
          </div>
          
        </div>
      </section>

      <section className="py-20 bg-gray-50">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-12">证书说明</h2>
          <div className="grid md:grid-cols-3 gap-8">
            {[
              {
                title: "权威认证",
                content: "由政府机构认证，具有广泛认可度",
              },
              {
                title: "终身有效",
                content: "证书终身有效，可在线查询验证",
              },
              {
                title: "就业保障",
                content: "与多家机构合作，提供就业推荐",
              },
            ].map((item, index) => (
              <div key={index} className="text-center">
                <h3 className="text-xl font-bold mb-4">{item.title}</h3>
                <p className="text-gray-600">{item.content}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  )
}

